<template>
  <div class="bg-ff">
    <div v-show="!city">
      <div v-for="(item,index) in province" :key="index" class="item_li" @click="getCity(item.id)">
        <div>{{item.name}}</div>
      </div>
    </div>
    <!--  -->
    <div v-show="city && !area">
      <div v-for="(item,index) in city" :key="index" class="item_li" @click="getArea(item.id)">
        <div>{{item.name}}</div>
      </div>
    </div>
    <!--  -->
    <div v-if="area">
      <div v-for="(item,index) in area" :key="index" class="item_li" @click="sure(item.id)">
        <div>{{item.name}}</div>
      </div>
    </div>
  </div>
</template>


<script>
export default {
  data() {
    return {
      province: "",
      city: "",
      area: "",
      resid: [0, 0, 0]
    };
  },
  mounted() {document.querySelector('html').style.backgroundColor = "#ffffff";},
  mounted() {
    this.$axios.post( "/common/getRegion", {
      id: 0
    }).then(res => {
      this.province = res.data.data;
    });
  },
  methods: {
    getCity(id) {
      this.resid[0] = id;
      this.$axios.post( "/common/getRegion", {
        id: id
      }).then(res => {
        this.city = res.data.data;
      });
    },
    getArea(id) {
      this.resid[1] = id;
      this.$axios.post( "/common/getRegion", {
        id: id
      }).then(res => {
        this.area = res.data.data;
      });
    },
    sure(id) {
      let type = this.$route.params.type;
      this.resid[2] = id;
      if(this.resid.length == 0 && this.$route.params.notnull == 1){
        this.$toast('请选择完整~')
        return false
      }
      this.$axios.post( "/wap/personal/editUserInfo", {
        token: window.localStorage.getItem("token"),
        key: type,
        value: this.resid.join(',')
      }).then(res => {
        this.$toast(res.data.msg);
        if (res.data.code == 0) {
          this.$router.go(-1);
        }
      });
    }
  }
};
</script>

<style scoped>
.item_li {
  border-bottom: 1px solid #eeeeee;
  padding: 0.4rem 2%;
}
</style>
<style>
html {
  background: white;
}
</style>